<!DOCTYPE html>

<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/react.development16.4.0.js"></script>
    <script src="./lib/react-dom.development16.4.0.js"></script>
    <script src="./lib/babel.min.js"></script>
    <script src="./lib/jquery.min.js"></script>
    <style>
      .div01{
          width: 300px;
          height: auto;
          border: 1px hotpink solid;
          overflow: hidden;
      }
    </style>
</head>

<body>
    <div id="app">
    </div>
    <script type="text/babel">
        
   class DivList extends React.Component {
        render() {
            let list = this.props.llist;
            if(!list){
            return (
                <div>
                    <h2>load.......</h2>
                </div>
            )
            }else{
                return (
                    <ul className="div01">
                    {list.map((item)=><li key={item.id}>{item.id}--{item.name}--{item.sex}</li>)}
                    </ul>
                )
            }
        }
    }
    
        
    class JqueryApi extends React.Component {

        constructor(props) {
            super(props);
            this.state={list:null}
        }

        ajax_api=()=>{
            let $this = this;
            let list = this.state.list;
            $.ajax({
                async : false,    //表示请求是否异步处理
                type : "get",    //请求类型
                url : "https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists",//请求的 URL地址
                dataType : "json",//返回的数据类型
                success: function (data) {
                     console.log(data);  //在控制台打印服务器端返回的数据
                     $this.setState({list:data});
                },
                error:function (data) {
                    alert(data.result);
                }
            });
        }

        jquery_get=()=>{
            let $this = this;
            let list = this.state.list;
            let url = "https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists";
            let param = {userID:"123",uname:"张三"};
            $.get(url,param,(data)=>{
                 //console.log(data);
                 $this.setState({list:data});
            });
        }

        jquery_post=()=>{
            let $this = this;
            let list = this.state.list;
            let url = "https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists";
            let param = null;//{userID:"123",uname:"张三"};
            $.post(url,param,(data)=>{
                 //console.log(data);
                 $this.setState({list:data});
            });
        }

        render() {
                return (
                    <div>
                        <div>
                          <button onClick={this.ajax_api}>$.ajax()</button>
                          <button onClick={this.jquery_get}>$.get()</button>
                          <button onClick={this.jquery_post}>$.post()</button>
                        </div>
                        <DivList llist={this.state.list}/>
                    </div>
                )
            }
        }
        
        const el = <JqueryApi />
        ReactDOM.render(
            el,document.getElementById('app')
        );
    </script>
</body>

</html>